<template>
  <view class="time-picker">
    <!-- 时间选择器 -->
    <view class="year">
      <view class="picker" @click="changeoption">
        <view v-if="typevalue == 'year'">{{ props.selected  }}年</view>
        <view v-if="typevalue == 'month'">{{ props.selected  }}月</view>
        <view v-if="typevalue == 'date'">{{ props.selected  }}日</view>
        <image src="../../static/image/right.png" alt="" class="select"
          :style="{ transform: 'rotate(' + rot + 'deg)' }" />
      </view>
      <view class="year-choose-con" :style="{ height: optionConH + 'px' }">
        <view class="year-choose">
          <view class="year-items" v-for="(item,index) in props.list" :key="item.id" @click="handelSelect(item.text)">
            <view v-if="typevalue == 'year'">{{ item.text  }}年</view>
            <view v-if="typevalue == 'month'">{{ item.text  }}月</view>
            <view v-if="typevalue == 'date'">{{ item.text  }}日</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    onMounted,
    onUnmounted
  } from 'vue';

  const emit = defineEmits(['update:selected'])
  const props = defineProps({
    typevalue: {
      type: String,
      required: true
    },
    list: ref([]),
    selected: String | Number,
  });
  // 控制旋转
  var optionConH = ref(0);
  var rot = ref(0);
  var ischose = ref(false);
  // 切换显示下拉选择区域
  function changeoption() {
    if (!ischose.value) {
      rot.value = 90;
      optionConH.value = 300;
    } else {
      optionConH.value = 0;
      rot.value = 0;
    }
    ischose.value = !ischose.value;
  }

  function handelSelect(item) {
    emit('update:selected', item)
    rot.value = 0;
    optionConH.value = 0;
    ischose.value = false;
  }
</script>

<style scoped>
  .picker {
    padding-left: 10rpx;
    width: 150rpx;
    height: 60rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    background-color: #2dafdfc2;
    border-radius: 40rpx;
    font-weight: 600;
    font-size: 30rpx;
    line-height: 60rpx;
  }

  .select {
    width: 40rpx;
    height: 40rpx;
    transition: all 0.5s;
  }

  .year,
  .month,
  .date {
    position: relative;
    cursor: pointer;
  }

  .year-choose-con,
  .month-choose-con,
  .date-choose-con {
    position: absolute;
    top: 100rpx;
    left: 0;
    text-align: center;
    width: 220rpx;
    overflow: hidden;
    transition: all 0.5s;
    z-index: 99;
  }

  .year-choose,
  .month-choose,
  .date-choose {
    font-size: 30rpx;
    font-weight: 600;
    color: #2dafdfc2;
    width: 260rpx;
    height: 540rpx;
    overflow: auto;
    overflow-y: scroll;
  }

  .year-items,
  .month-items,
  .date-items {
    width: 150rpx;
    height: 60rpx;
    color: #fff;
    text-align: center;
    transition: all 0.3s;
    line-height: 60rpx;
    margin-bottom: 20rpx;
    background-color: rgba(36, 74, 126, 0.7);
  }

  .year-items:hover,
  .month-items:hover,
  .date-items:hover {
    background-color: #2dafdfc2;
    cursor: pointer;
    border-radius: 20rpx;
  }
</style>
